<template>
    <div class="gradient">
        <slot />
    </div>
</template>

<script>
export default {
    name: "gradient",
};
</script>

<style lang="less" scoped>
.gradient {
    background-image: linear-gradient(
        120deg,
        #ee7752,
        #e73c7e,
        #23a6d5,
        #23d5ab,
        #ee7752,
        #e73c7e
    );
    background-size: 600% 100%;
    -webkit-transition: width 0.3s linear;
    transition: width 0.3s linear;
    padding: 4px;
    animation: animationGradient 10s ease infinite;
}

@keyframes animationGradient {
    0%,
    100% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}
</style>